<template>
  <el-card class="box-card" shadow="never">
    <div slot="header">
      <span class="card-head-title">流程进度</span>
    </div>
    <div class="card-body">
      <el-steps :active="activeNode" align-center>
        <el-step v-for="(value, key) in processList"
                 :key="key"
                 :title="value.nodeName">
          <template slot="description" >
            <span>{{ value.handler }}<br/>{{ value.handleTime }}</span>
          </template>
        </el-step>
      </el-steps>
    </div>
  </el-card>
</template>

<script>
   import { getByBusinessId } from '@/api/activiti/detail'
   import { getByBusinessKey } from '@/api/activiti/configure'

  export default {
    name: 'PrecessScheduleChart',
    props: {
      businessId: {
        required: false,
        type: Number,
        default: -1,
      },
      businessKey: {
        required: true,
        type: String
      }
    },
    data() {
      return {
        // 流程列表
        processList: [],
        processConfigureList: [],
        processDetailList: [],
        activeNode: 1
      }
    },
    create() {

    },
    mounted() {

    },
    methods: {
      // 初始化方法
      async init(id) {
         const _this = this;

         await getByBusinessKey(_this.businessKey).then(res => {
           if (res && res.code === 200) {
             _this.processConfigureList = res.data
           }
         })

         if (_this.businessId) {
           await getByBusinessId(_this.businessId).then(res => {
             if (res && res.code === 200) {
               _this.processDetailList = res.data
             }
           })
         }

         _this.processList = [];
         _this.activeNode = 0;
         _this.processConfigureList.forEach(configure => {
           let process = {
             configure: '',
             handler: '',
             handleTime: '',
           }
           process.nodeName = configure.nodeName;
           _this.processDetailList.forEach(detail => {
             if (configure.id === detail.configure.id) {
               process.handler = detail.handler;
               process.handleTime = detail.handleTime;
               _this.activeNode+=1;
             }
           })
          _this.processList.push(process);
         })
      }
    }
  }
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 24px;
  .card-head-title {
    display: inline-block;
    padding: 8px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    font-size: 16px;
  }
  .card-body {
    padding: 12px 14px;
    .tag-text {
      margin-left: 8px;
    }
    .confirm-btn-group {
      display: flex;
      flex-direction: row-reverse;
      .confirm-btn-system {
        margin-right: 14px
      }
    }
  }
}
</style>
